<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Basic Draw Triangle</title>

  <script id="shader-vs" type="x-shader/x-vertex">
    attribute vec3 aPos;
    void main(void){
      gl_Position = vec4(aPos, 1);
    }
  </script>

  <script id="shader-fs" type="x-shader/x-fragment">
    void main(void) {
      gl_FragColor = vec4(1.0, 0.5, .0, 1.0);
    }
  </script>

</head>
<body>
  <canvas id="canvas" width="400" height="400" ></canvas>
  <script>
    var gl
    var canvas = document.getElementById('canvas')
    var glProgram = null

    function getGLContext() {
      var glContextNames = ['webgl', 'experimental-webgl']
      for (var i = 0; i < glContextNames.length; i++) {
        try {
          gl = canvas.getContext(glContextNames[i])
        } catch (e) {}
        if (gl) {
          gl.clearColor(74 / 255, 115 / 255, 94 / 255, 1.0)
          gl.clear(gl.COLOR_BUFFER_BIT)
          gl.viewport(0, 0, canvas.width, canvas.height)
          break
        }
      }
    }

    function initShaders() {
      //get shader source
      var vs_source = document.getElementById('shader-vs').innerHTML,
        fs_source = document.getElementById('shader-fs').innerHTML

      //compile shaders   
      vertexShader = makeShader(vs_source, gl.VERTEX_SHADER)
      fragmentShader = makeShader(fs_source, gl.FRAGMENT_SHADER)

      //create program
      glProgram = gl.createProgram()

      //attach and link shaders to the program
      gl.attachShader(glProgram, vertexShader)
      gl.attachShader(glProgram, fragmentShader)
      gl.linkProgram(glProgram)

      if (!gl.getProgramParameter(glProgram, gl.LINK_STATUS)) {
        alert("Unable to initialize the shader program.")
      }

      //use program
      gl.useProgram(glProgram)
    }

    function makeShader(src, type) {
      //compile the vertex shader
      var shader = gl.createShader(type)
      gl.shaderSource(shader, src)
      gl.compileShader(shader)

      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert("Error compiling shader: " + gl.getShaderInfoLog(shader))
      }
      return shader
    }

    function setupBuffer() {
      // vertex representing the triangle
      var vertex = [
        -.5, -.2, 0,
        .5, -.2, 0,
        0, .6, 0,
        0, -.6, 0
      ]
      var vertexBuffer = gl.createBuffer()
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertex), gl.STATIC_DRAW)

      // let index = [
      //   0, 1, 2,
      //   0, 1, 3
      // ]  // gl.TRIANGLES
      // let index = [2, 0, 1, 3] // gl.TRIANGLE_STRIP
      let index = [0, 2, 1, 3] // gl.TRIANGLE_FAN

      var indexBuffer = gl.createBuffer()
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer)
      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(index), gl.STATIC_DRAW)

      var aVertexPosition = gl.getAttribLocation(glProgram, 'aPos')
      gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0)
      gl.enableVertexAttribArray(aVertexPosition)
    }

    function draw() {
      // gl.drawArrays(gl.TRIANGLES, 0, 6)
      // gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0)
      // gl.drawElements(gl.TRIANGLE_STRIP, 4, gl.UNSIGNED_SHORT, 0)
      gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, 0)
    }

    window.onload = function () {
      getGLContext()
      initShaders()
      setupBuffer()
      draw()
    }
  </script>
</body>
</html>